<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Redstone Heart的空间</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.css" rel="stylesheet">
  <style>
    html {
      height: 100%;
      min-width: 1000px;
      background-color: #222;
      user-select: none;
    }
    body {
      margin: 0px;
      height: 100%;
    }

    .background-pattern {
      position: fixed;
      z-index: -1;
      top: -1030px;
      left: -390px;
      opacity: 0.06;
      font-size: 50px;
      white-space: nowrap;
      line-height: 115px;
      filter: grayscale() drop-shadow(black 0px 0px 4px);
      transform-origin: center center;
      transform: rotate(45deg);
    }

    .header-menu {
      z-index: 2;
      display: flex;
      justify-content: stretch;
      align-items: center;
      position: fixed;
      top: 0px;
      height: 60px;
      min-width: 500px;
      width: 100%;
      background: linear-gradient(#484848 10%, #333 100%);
      filter: drop-shadow(#0008 0px 0px 20px);
      animation: game-bar-reveal 0.15s ease-in 0.5s forwards;
    }
    .main-title {
      margin-left: 10px;
      font-size: 40px;
      font-weight: bold;
      font-family: "Century Gothic";
      text-decoration: none;
      cursor: pointer;
    }
    .white-title {
      color: white;
      filter: drop-shadow(white 0px 0px 4px);
    }
    .blue-title {
      color: #9CF;
      filter: drop-shadow(#9CF 0px 0px 4px);
    }
    .red-title {
      color: #F99;
      filter: drop-shadow(#F99 0px 0px 4px);
    }
    .header-menu-item {
      filter: drop-shadow(#FFFA 0px 0px 7px);
      margin: 10px 20px;
      color: #FFF;
      font-size: 25px;
      text-decoration: none;
      cursor: pointer;
    }
    .main-menu-item-pressed { animation: main-menu-item-press 0.25s ease-in-out; }
    @keyframes main-menu-item-press {
      33% { transform: scale(0.8, 0.8); }
      66% { transform: scale(1.1, 1.1); }
      100% { transform: scale(1, 1); }
    }

    .main-scroll {
      margin: 90px auto 0px auto;
      width: 70%;
      max-width: 1000px;
      background-color: #333;
      border: #555 1px solid;
      border-radius: 10px;
      filter: drop-shadow(#0008 0px 0px 20px);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .game-card {
      cursor: pointer;
      min-height: 118px;
      margin: -1px;
      min-width: 210px;
      max-width: 210px;
      background-color: #333;
      border: #666 1px solid;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 10px;
      overflow: hidden;
      display: flex;
    }
    .chessboard-icon {
      color: #555;
      filter: drop-shadow(#000A 0px 0px 6px);
      margin: -3px 10px -3px 0px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .game-winner {
      max-width: 70px;
      color: #999;
      font-weight: bold;
      font-size: 14px;
      margin-top: 4px;
      filter: drop-shadow(#999C 0px 0px 6px);
    }
    .game-winner-large {
      color: #777;
      font-weight: bold;
      font-size: 40px;
      margin-top: -79px;
      filter: drop-shadow(#000A 0px 0px 5px);
    }
    .game-winner-black {
      color: #000;
      filter: drop-shadow(#FFF 0px 0px 10px);
    }
    .game-winner-white {
      color: #DDD;
      filter: drop-shadow(#000 0px 0px 10px);
    }
    .game-infos {
      filter: grayscale();
      font-size: 12px;
      color: #777;
    }
    .game-info {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .basic-info-panel {
      display: flex;
      flex-direction: row;
      width: calc(100% - 80px);
      max-width: 800px;
    }
    .basic-info-wrapper {
      display: flex;
      flex-direction: column;
    }
    .user-info-panel {
      box-sizing: border-box;
      padding-top: 10px;
      margin: 20px 0px;
      width: 100%;
      height: 300px;
      background-color: #2B2B2B;
      border: #444 1px solid;
      border-radius: 10px;
      box-shadow: inset #0008 0px 0px 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .basic-info-separator {
      margin: 0px 10px 15px 10px;
      width: 1px;
      background-color: #555;
    }
    .recent-games-panel {
      box-sizing: border-box;
      padding-top: 3px;
      margin: 20px 0px;
      width: 100%;
      height: 300px;
      background-color: #2B2B2B;
      border: #444 1px solid;
      border-radius: 10px;
      box-shadow: inset #0008 0px 0px 20px;
    }

    .player-profile-panel {
      margin: 0px 15px 15px 15px;
      padding: 5px;
      box-sizing: border-box;
      background-color: #0003;
      border: #444 1px solid;
      box-shadow: inset #0008 0px 0px 10px;
      border-radius: 10px;
      color: #666;
    }
    .player-profile-quote {
      font-weight: bold;
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
      font-size: 40px;
      display: inline-block;
      height: 25px;
      overflow: hidden;
      margin-right: 5px;
    }
    .player-profile-editor {
      text-align: justify;
      background: none;
      border: none;
      outline: none;
      font-size: 16px;
      width: calc(100% - 40px);
      color: #666;
      font-weight: lighter;
    }
    .panel-item {
      margin: 3px 15px;
      font-size: 16px;
      color: #666;
    }

    .user-info-line {
      width: 100%;
      display: flex;
    }
    .user-info-line-button {
      width: 37px;
      height: 37px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #CCC;
      border: #555 1px solid;
      border-radius: 10px;
      background-color: #383838;
    }
    .user-info-line-button:hover { background-color: #444; }
    .user-info-line-button:active { background-color: #333; }
    .user-info-icon {
      color: #888;
      margin: 19px -5px 0px -5px;
    }
    .controller-input {
      width: calc(100% - 100px);
      font-family: inherit;
      margin: 0px 15px;
      color: #999;
      background-color: #444;
      outline: none;
      border: #666 1px solid;
      border-radius: 8px;
      height: 35px;
      padding-left: 10px;
      filter: drop-shadow(#0004 0px 0px 5px);
    }
    .controller-input:disabled { filter: brightness(0.65); }
    .text-input {
      color: #999;
      border: #555 1px solid;
      background-color: #282828;
      box-shadow: inset #0004 0px 0px 15px;
      outline: none;
      filter: none;
    }

    .recent-game-item {
      margin: 7.7px 10px;
      font-size: 16px;
      font-weight: lighter;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: all 0.1s;
    }
    .recent-game-item:nth-child(odd) { color: #AAA; }
    .recent-game-item:nth-child(even) { color: #666; }
    .recent-game-item:hover {
      color: #CCC;
      font-weight: bold;
      text-decoration: underline;
    }

    .panel-title {
      width: calc(100% - 80px);
      max-width: 800px;
      font-size: 22px;
      display: flex;
      align-items: center;
      color: #888;
      font-weight: lighter;
      margin: -10px 0px;
    }
    .displayed-games-panel {
      margin: 20px 0px 40px 0px;
      width: calc(100% - 80px);
      max-width: 800px;
      background-color: #222;
      border: #444 1px solid;
      border-radius: 10px;
      box-shadow: inset #000 0px 0px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 20px;
    }
    .displayed-games-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: calc(100% - 60px);
    }
    .no-displayed-items {
      font-size: 20px;
      font-weight: lighter;
      color: #444;
    }
    .displayed-game {
      margin: 10px 0px;
      width: 100%;
      display: flex;
      flex-direction: row;
      background-color: #252525;
      border: #444 1px solid;
      border-radius: 10px;
      filter: drop-shadow(#000A 0px 0px 7px);
      animation: displayed-game-reveal 0.2s linear;
    }
    @keyframes displayed-game-reveal {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }

    .displayed-game-details {
      margin: 10px;
      font-weight: lighter;
      display: flex;
      flex-direction: column;
      font-size: 16px;
      text-align: justify;
      color: #777;
    }
    .game-delete-button {
      margin-top: 10px;
      margin-left: 15px;
      visibility: hidden;
    }
    .game-delete-button:hover { color: #888; }
    .game-delete-button:active { color: #555; }
    .deletable-displayed-game:hover .game-delete-button { visibility: visible; }
    .game-detail-item {
      margin: 5px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      color: #999;
    }
    .game-displaye-date {
      color: #606060;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      display: flex;
    }

    .page-flipper {
      margin: 20px 0px 30px 0px;
      display: flex;
      width: 288px;
      justify-content: center;
      border-radius: 10px;
      border: #666 1px solid;
      overflow: hidden;
    }
    .page-input {
      width: 60px;
      box-sizing: border-box;
      background-color: #333;
      outline: none;
      border: #555 1px solid;
      text-align: center;
      color: #EEE;
      font-size: 16px;
    }
    .page-flipper-button {
      margin: -1.5px;
      width: 60px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #EEE;
      background-color: #444;
    }
    .page-flipper-button:not(.page-flipper-button-disabled):hover { background-color: #555; }
    .page-flipper-button:not(.page-flipper-button-disabled):active { background-color: #333; }
    .page-flipper-button-disabled { color: #888; }
  </style>
</head>
<body>
<div class="background-pattern">
  <script>
    for (let i = 0; i < 29; ++i) {
      for (let j = 0; j < 22; ++j) {
        let Rand = Math.random();
        if (Rand < 0.25)
          document.write("❤　");
        else if (Rand < 0.75)
          document.write("🐷　");
        else
          document.write("👷‍♀️");
      }
      document.write("<br/>");
    }
  </script>
</div>

<div class="header-menu">
  <a href="./main_page.html" class="main-title"><span class="white-title">G</span><span class="blue-title">A</span><span class="white-title">M</span><span class="red-title">E</span></a>
  <div style="flex-grow: 1;"></div>
  <a class="header-menu-item fa-solid fa-reply fa-lg" id="ReturnButton" title="返回上一页"></a>
  <a class="header-menu-item fa-solid fa-paper-plane fa-lg" id="ShareButton" title="复制分享链接"></a>
  <a class="header-menu-item fa-solid fa-user fa-lg" id="UserButton" title="个人主页"></a>
</div>

<div class="main-scroll">
  <div style="height: 20px;"></div>

  <div class="basic-info-panel">
    <div class="basic-info-wrapper" style="width: 70%;">
      <div class="panel-title" style="margin-top: 0px;">用户基本信息</div>
      <div class="user-info-panel">
        <div class="panel-item">用户昵称：</div>
        <div class="user-info-line">
          <input class="controller-input text-input" id="NicknameBox" type="input" placeholder="编辑用户昵称" value="--" disabled/>
          <div class="user-info-line-button fa-solid fa-clone" id="NicknameCopyButton" title="复制用户名"></div>
        </div>
        <div class="panel-item">账号注册邮箱：</div>
        <div class="user-info-line">
          <input class="controller-input text-input" id="EmailBox" type="input" placeholder="更改用户邮箱" value="--" disabled/>
          <div class="user-info-line-button fa-solid fa-clone" id="EmailCopyButton" title="复制邮箱地址"></div>
        </div>
        <div class="panel-item">对局统计数据：</div>
        <div class="user-info-line">
          <div class="user-info-icon fa-solid fa-chart-line fa-lg" style="margin-left: 20px;" title="用户积分"></div>
          <input class="controller-input text-input" id="ScoreBox" type="input" value="--点" title="用户积分" disabled/>
          <div class="user-info-icon fa-solid fa-circle-half-stroke fa-lg" title="对局总数"></div>
          <input class="controller-input text-input" id="WinGamesBox" type="input" value="--场" title="对局总数" disabled/>
          <div class="user-info-icon fa-solid fa-circle-check fa-lg" title="获胜局数"></div>
          <input class="controller-input text-input" id="TotalGamesBox" style="margin-right: 70px;" type="input" value="--场" title="获胜局数" disabled/>
        </div>
        <div class="panel-item">个性签名及简介：</div>
        <div class="player-profile-panel">
          <div class="player-profile-quote">“</div>
          <input class="player-profile-editor" id="ProfileBox" spellcheck="false" placeholder="编辑个性签名" disabled/>
        </div>
      </div>
    </div>
    <div class="basic-info-separator"></div>
    <div class="basic-info-wrapper" style="width: 30%;">
      <div class="panel-title" style="margin-top: 0px;">近期对局</div>
      <div class="recent-games-panel" id="RecentGamesPanel"></div>
    </div>
  </div>

  <div class="panel-title" id="DisplayPanelTitleLabel">-- 的对局展示</div>
  <div class="displayed-games-panel">
    <div class="displayed-games-wrapper">
      <div class="no-displayed-items">该用户未展示任何对局</div>
    </div>

    <div class="page-flipper">
      <div id="PageFirstButton" class="page-flipper-button page-flipper-button-disabled page-first fa-solid fa-angles-left fa-lg" title="转到首页"></div>
      <div id="PagePriorButton" class="page-flipper-button page-flipper-button-disabled page-up fa-solid fa-angle-left fa-lg" title="上一页"></div>
      <input id="PageNumberBox" class="page-input" placeholder="页码" value="1"></input>
      <div id="PageNextButton" class="page-flipper-button page-flipper-button-disabled page-down fa-solid fa-angle-right fa-lg" title="下一页"></div>
      <div id="PageLastButton" class="page-flipper-button page-flipper-button-disabled page-last fa-solid fa-angles-right fa-lg" title="转到尾页"></div>
    </div>
  </div>
</div>

<div style="height: 30px;"></div>

<script>
  let UserID = 0;
  for (let Attribute of window.location.href.split("?")[1].split("&"))
    if (Attribute.startsWith("user_id="))
      UserID = parseInt(Attribute.slice(8));

  function FormatDate(date) {
    date = new Date(date);
    let Year = date.getFullYear();
    let Month = (date.getMonth() < 9 ? "0" : "") + (date.getMonth() + 1);
    let Day = (date.getDate() < 10 ? "0" : "") + date.getDate();
    let Hours = (date.getHours() < 10 ? "0" : "") + date.getHours();
    let Minutes = (date.getMinutes() < 10 ? "0" : "") + date.getMinutes();
    return `${Year}-${Month}-${Day} ${Hours}:${Minutes}`;
  }

  function LoadUserInfo() {
    $.post("/Gomokult_war_exploded/servlet/GetUserByIDServlet", {
      userID: UserID
    }, (data) => {
      if (data.startsWith("#"))
        return;
      let User = JSON.parse(data);
      DisplayPanelTitleLabel.innerHTML = `${User.nickname} 的对局展示`;
      NicknameBox.value = User.nickname;
      EmailBox.value = User.email;
      ScoreBox.value = `${User.score}点`;
      TotalGamesBox.value = `${User.totalGames}场`;
      WinGamesBox.value = `${User.winGames}场`;
      ProfileBox.value = User.profile != "" ? User.profile : "这个人很懒，什么都没有写";
    });
  }
  function GetGameResult(game) {
    if (game.winner == "draw")
      return "和局";
    if (game.winner == "black" && game.userBlack.userID == UserID || game.winner == "white" && game.userWhite.userID == UserID)
      return "胜利";
    else
      return "失败";
  }
  function LoadRecentGames() {
    $.post("/Gomokult_war_exploded/servlet/QueryRecentGamesServlet", {
      userID: UserID
    }, (data) => {
      if (data.startsWith("#"))
        return;
      let HTML = "";
      for (let Game of JSON.parse(data))
        HTML += `
							<div class="recent-game-item" game-id="${Game.gameID}">
								●&ensp;${FormatDate(Game.date).replace(" ", "&ensp;")}&ensp;${GetGameResult(Game)}
							</div>
						`;
      RecentGamesPanel.innerHTML = HTML;
      $(".recent-game-item").click((event) => { document.location = `game_viewer.html?game_id=${event.target.getAttribute("game-id")}`; });
    });
  };
  LoadUserInfo();
  LoadRecentGames();

  NicknameBox.onchange = () => {
    if (4 <= NicknameBox.value.length && NicknameBox.value.length <= 16)
      $.post("/Gomokult_war_exploded/servlet/UpdateUserInfoServlet", {
        userID: UserID,
        nickname: NicknameBox.value,
        profile: ProfileBox.value,
        email: EmailBox.value,
        executorID: sessionStorage.getItem("CurrentUser")
      }, (data) => { NicknameBox.style["color"] = ""; });
    else
      NicknameBox.style["color"] = "#F99";
  };
  ProfileBox.onchange = () => {
    if (ProfileBox.value.length <= 32)
      $.post("/Gomokult_war_exploded/servlet/UpdateUserInfoServlet", {
        userID: UserID,
        nickname: NicknameBox.value,
        profile: ProfileBox.value,
        email: EmailBox.value,
        executorID: sessionStorage.getItem("CurrentUser")
      }, (data) => { ProfileBox.style["color"] = ""; });
    else
      ProfileBox.style["color"] = "#F99";
  };

  ReturnButton.onclick = () => { window.history.back(); };
  ShareButton.onclick = () => {
    navigator.clipboard.writeText(this.location.href);
    let SelectedItem = $("#ShareButton");
    SelectedItem.addClass("main-menu-item-pressed");
    setTimeout(() => { SelectedItem.removeClass("main-menu-item-pressed"); }, 250);
  };
  UserButton.onclick = () => { window.location = `user_space.html?user_id=${sessionStorage.getItem("CurrentUser")}`; };

  NicknameCopyButton.onclick = () => { navigator.clipboard.writeText(NicknameBox.value); };
  EmailCopyButton.onclick = () => { navigator.clipboard.writeText(EmailBox.value); };

  let MaxPagesCount = 0;
  function SetPageNumber(number) {
    PageNumberBox.value = Math.max(1, Math.min(MaxPagesCount, number));
    $("#PageFirstButton").removeClass("page-flipper-button-disabled");
    $("#PagePriorButton").removeClass("page-flipper-button-disabled");
    $("#PageNextButton").removeClass("page-flipper-button-disabled");
    $("#PageLastButton").removeClass("page-flipper-button-disabled");
    if (parseInt(PageNumberBox.value) <= 1) {
      $("#PageFirstButton").addClass("page-flipper-button-disabled");
      $("#PagePriorButton").addClass("page-flipper-button-disabled");
    }
    if (parseInt(PageNumberBox.value) >= MaxPagesCount) {
      $("#PageNextButton").addClass("page-flipper-button-disabled");
      $("#PageLastButton").addClass("page-flipper-button-disabled");
    }
  }
  function UpdateTotalPagesCount(callback = () => {}) {
    $.post("/Gomokult_war_exploded/servlet/GetDisplayedGamePagesCountServlet", {
      userID: UserID
    }, (count) => {
      MaxPagesCount = parseInt(count);
      if (parseInt(PageNumberBox.value) > MaxPagesCount)
        SetPageNumber(MaxPagesCount);
      if (parseInt(PageNumberBox.value) == 0)
        SetPageNumber(1);
      callback();
    });
  }
  function ReloadDisplayedGames() {
    if (MaxPagesCount == 0) {
      $(".displayed-games-wrapper").html(`<div class="no-displayed-items">该用户未展示任何对局</div>`);
      return;
    }

    $.post("/Gomokult_war_exploded/servlet/QueryDisplayedGamesServlet", {
      page: PageNumberBox.value,
      userID: UserID
    }, (displayed_games) => {
      if (displayed_games.startsWith("#"))
        return;
      let HTML = "", Icons = {"black": "⚫", "white": "⚪", "draw": "🔘"};
      for (let DisplayedGame of JSON.parse(displayed_games)) {
        HTML += `
							<div class="displayed-game ${DisplayedGame.user.userID == sessionStorage.getItem("CurrentUser") ? "deletable-displayed-game" : ""}" game-id="${DisplayedGame.game.gameID}">
								<div class="game-card">
									<div class="chessboard-icon fa-solid fa-chess-board fa-5x">
										<div class="game-info game-winner">♥ ${DisplayedGame.game.likesCount}</div>
										<div class="game-info game-winner-large game-winner-${DisplayedGame.game.winner}">${Icons[DisplayedGame.game.winner]}</div>
									</div>
									<div class="game-infos">
										<div class="game-info" title="对局日期">📆 ${FormatDate(new Date(DisplayedGame.game.date)).split(" ")[0]}</div>
										<div class="game-info" title="对局时间">🕒 ${FormatDate(new Date(DisplayedGame.game.date)).split(" ")[1]}~${FormatDate(new Date(DisplayedGame.game.date + 1000 * (DisplayedGame.game.blackDuration + DisplayedGame.game.whiteDuration))).split(" ")[1]}</div>
										<div class="game-info" title="黑方玩家">🟤 ${DisplayedGame.game.userBlack.nickname}</div>
										<div class="game-info" title="白方玩家">⚪ ${DisplayedGame.game.userWhite.nickname}</div>
										<div class="game-info" title="落子步数">🔄 共${DisplayedGame.game.piecesSequence.length}步</div>
									</div>
								</div>
								<div class="displayed-game-details">
									<div class="game-detail-item game-displaye-date">
										<div>添加日期：${FormatDate(new Date(DisplayedGame.displayDate))}</div>
										<div class="game-delete-button fa-solid fa-trash-can fa-sm"></div>
									</div>
									<div class="game-detail-item">${DisplayedGame.description}</div>
								</div>
							</div>
						`;
      }
      $(".displayed-games-wrapper").html(HTML);
      $(".game-card").click((event) => {
        while (!event.target.classList.contains("displayed-game"))
          event.target = event.target.parentNode;
        let GameID = event.target.getAttribute("game-id");
        document.location = `game_viewer.html?game_id=${GameID}`;
      });
      $(".game-delete-button").click((event) => {
        $.post("/Gomokult_war_exploded/servlet/DeleteDisplayedGameServlet", {
          userID: UserID,
          gameID: event.target.parentNode.parentNode.parentNode.getAttribute("game-id")
        }, (data) => {
          // TODO：删除动画（或重新加载动画）；
          if (!data.startsWith("#"))
            UpdateTotalPagesCount(ReloadDisplayedGames);
        });
      });
    });
  }

  PageNumberBox.onchange = () => {
    UpdateTotalPagesCount(() => {
      SetPageNumber(parseInt(PageNumberBox.value));
      ReloadDisplayedGames();
    });
  }
  PageFirstButton.onclick = () => {
    if (!$("#PageFirstButton").hasClass("page-flipper-button-disabled"))
      UpdateTotalPagesCount(() => {
        SetPageNumber(1);
        ReloadDisplayedGames();
      });
  }
  PagePriorButton.onclick = () => {
    if (!$("#PagePriorButton").hasClass("page-flipper-button-disabled"))
      UpdateTotalPagesCount(() => {
        SetPageNumber(parseInt(PageNumberBox.value) - 1);
        ReloadDisplayedGames();
      });
  }
  PageNextButton.onclick = () => {
    if (!$("#PageNextButton").hasClass("page-flipper-button-disabled"))
      UpdateTotalPagesCount(() => {
        SetPageNumber(parseInt(PageNumberBox.value) + 1);
        ReloadDisplayedGames();
      });
  }
  PageLastButton.onclick = () => {
    if (!$("#PageLastButton").hasClass("page-flipper-button-disabled"))
      UpdateTotalPagesCount(() => {
        SetPageNumber(MaxPagesCount);
        ReloadDisplayedGames();
      });
  }

  (function TryLogin() {
    let Email = null, Password = null;
    for (let Token of document.cookie.split(";"))
      if (Token.includes("GomokultEmail="))
        Email = Token.split("=")[1].slice(1, -1);
      else if (Token.includes("GomokultPassword="))
        Password = Token.split("=")[1].slice(1, -1);
    let SessionUser = sessionStorage.getItem("CurrentUser");
    if (Email != null && Password != null || SessionUser != null) {
      $.post("/Gomokult_war_exploded/servlet/LoginVerifyServlet", {
        email: Email,
        password: Password
      }, (message) => {
        result = message.split("#");
        if (parseInt(result[1]) >= 0 || SessionUser != null) {
          sessionStorage.setItem("CurrentUser", parseInt(SessionUser != null ? SessionUser : result[1]));
          sessionStorage.setItem("CurrentEmail", Email);
          if (UserID == sessionStorage.getItem("CurrentUser")) {
            NicknameBox.disabled = null;
            ProfileBox.disabled = null;
          }
          UpdateTotalPagesCount(ReloadDisplayedGames);
        }
        else
          window.location = "main_page.html";
      });
      return;
    }
    window.location = "main_page.html";
  })();
</script>
</body>
</html>
